<template>
    <fieldset>
        <legend>编辑</legend>
        <p v-for="(v,k,i) in userInfo">
                <label for="">{{k}}</label>
                :
                <input type="text" v-model="val" ref="ipt" @blur="esc(k)" v-if="isEdit&&i===selectedIndex">
                <span @dblclick="redact(v,i)" v-else>{{v}}</span>
            </p>
    </fieldset>
</template>
<script>
    export default {
        data() {
            return {
                userInfo: {
                "姓名": "梅雨溪",
                "年龄": 18,
                "爱好": "写代码", 
                "身高": "100cm"
            },
            val: "夏洛",
            isEdit: false,
            selectedIndex: ""
            }
        },
        methods: {
            redact(v, i) {
                this.isEdit = true;
                this.selectedIndex = i;
                this.val = v;
                this.$nextTick(() => {
                    console.log(this.$refs.ipt[0].focus());
                })
            },
            // 失去焦点处理的事件
            esc(k) { 
                this.isEdit = false;//退出编辑状态
                //退出编辑状态的时候 需要更改userInfo的值为当前的输入值
                console.log(k);
                this.userInfo[k] = this.val
            }
        }
    }
</script>
<style scoped>
    span {
        border-bottom: 1px solid black;
        width: 100px;
        display: inline-block;
        text-align: center;
    }

    input {
        outline: 0;
        border: 0;
        border-bottom: 1px solid black;
        width: 100px;
        font-size: 16px;
        text-align: center;
    }
    fieldset{
        margin-bottom: 10px;
    }
</style>